<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
#parent{width:600px;height:20px;background-color: #ccc;position: relative; margin:20px auto;}
#div1{width:20px;height:20px;background-color: red;position: absolute;left:0;top:0;}
#div2{width:400px;height:300px;position: relative;overflow: hidden;border:1px solid black;}
#div3{position: absolute;top:0;left:0;padding:6px;}
</style>
    <script>
        window.onload=function(){
            var oParent=document.getElementById('parent');
            var oDiv=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            var oDiv3=document.getElementById('div3');
            var disX=0;
            var disY=0;
            oDiv.onmousedown=function(ev){//鼠标按下
                var oEvent=ev||event;
//                滚动条只要求横向拖动，不需要纵向拖动，所以可以把纵坐标运动的都删除
                disX=oEvent.clientX-oDiv.offsetLeft;//距离横坐标
                //disY=oEvent.clientY-oDiv.offsetTop;//距离纵坐标

                if(oDiv.releaseCapture){
                    //只在IE下兼容，在这个条件下，执行下面的代码

                    oDiv.onmouseover=mouseMove;//鼠标移动

                    oDiv.onmouseup=mouseUp;//鼠标抬起

                    oDiv.setCapture();//事件捕获，将所有事件都集中在一个div上
                }
                else{
                    //Chrome、FF
                    document.onmouseover=mouseMove;//鼠标移动
                    document.onmouseup=mouseUp;//鼠标抬起
                    return false;// 可以解决Chrome FF IE9,有文字的情况下，但是不能解决IE6-8             解决FF空div出现的bug，通过阻止默认事件
                }


            };
            function mouseMove (ev){//鼠标拖快了，会脱离方块，所以需要加在document                      鼠标移动，鼠标hover
                var oEvent=ev||event;
                var l=oEvent.clientX-disX;
                //var t=oEvent.clientY-disY;
                if(l<0){//左边
                  l=0;
                }
                else if(l>oParent.offsetWidth-oDiv.offsetWidth){//右边
                    l=oParent.offsetWidth-oDiv.offsetWidth;
                }
                oDiv.style.left=l+'px';
                var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
                document.title=scale;//scale  0--1变化
//                控制物体的大小//
               // oDiv2.style.width=400*scale+'px';
              //  oDiv2.style.height=400*scale+'px';
//                控制物体的透明度
                //oDiv2.style.opacity=scale;
                //oDiv.style.top=t+'px';

                //            控制物体内部文字滚动
                oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
            }


            function mouseUp(){//鼠标抬起，就需要把前面的事件解除
                this.onmouseover=null;
                this.onmouseup=null;

                if(oDiv.releaseCapture){
                    oDiv.releaseCapture();//解除事件捕获，
                }
            }
        };
    </script>
</head>
<body>
<div id="parent">
    <div id="div1"></div>
</div>
<div id="div2">
    <div id="div3">
        晋太康中，张茂先①为建安从事，游于洞山。缘溪深入，有老人枕书石上卧，茂先坐与论说。视其所枕书，皆蝌蚪文，莫能辨，茂先异之。老人问茂先曰：“君读书几何？”茂先曰：“华之未读者，二十年内书，若二十年外书，则华固已读尽之矣。”老人微笑，把茂先臂走石壁下，忽有门入，途径甚宽，至一精舍，藏书万卷。问老人曰：“何书？”曰：“世史也。”又至一室，藏书愈富。又问：“何书？”老人曰：“万国志也。”后至一密室，扃钥甚固，有二黑犬守之，上有署篆，曰“琅嬛福地”。问老人曰：“何地？”曰：“此玉京、紫微、金真、七瑛、丹书、秘籍。”指二犬曰：“此痴龙也，守此二千年矣。”开门肃茂先入，见所藏书，皆秦汉以前及海外诸国事，多所未闻，如《三坟》《九丘》《连山》《归藏》《祷杌》《春秋》诸书，亦皆在焉。茂先爽然自失。老人乃出酒果饷之，鲜洁非人世所有。茂先为停信宿而出，谓老人曰：“异日裹粮再访，纵观群书。”老人笑不答，送茂先出。甫出，门石忽然自闭。茂先回视之，但见杂草藤萝，绕石而生，石上苔藓亦合，初无缝隙。茂先痴㾂伫视，望石再拜而去。
        嬴氏焚书史，咸阳火正炽。此中有全书，并不遗只字。上溯书契前，结绳亦有记。繇前视伏羲，已是其叔季。海外多名邦，九州一黑痣。读书三十乘，千万中一二。方知余见小，春秋问蛄蟪。石彭与凫毛，所见同儿稚。欲入问老人，路迷不得至。回首绝壁间，荒蔓惟薜荔。懊恨一出门，可望不可企。坐卧十年许，此中或开示。
        [注] ①张茂先：名华，字茂先。西晋文学家。<br>
        曾公亮，字明仲，泉州晋江人。举进士甲科，知会稽县。民田镜湖旁，每患湖溢。公亮立斗门，泄水入曹娥江，民受其利。以端明殿学士知郑州，为政有能声盗悉窜他境至夜户不闭尝有使客亡橐中物移书诘盗公亮报吾境不藏盗殆从者之廋耳索之果然公亮明练文法，更践久，习知朝廷台阁典宪，首相韩琦每咨访焉。仁宗末年，琦请建储，与公亮等共定大议。密州民田产银，或盗取之，大理当以强。公亮曰：“此禁物也，取之虽强，与盗物民家有间矣。”固争之，遂下有司议，比劫禁物法，盗得不死。契丹纵人渔界河，又数通盐舟，吏不敢禁，皆谓：与之校，且生事。公亮言：“萌芽不禁，后将奈何？雄州赵滋勇而有谋，可任也。”使谕以指意，边害讫息。英宗即位，加中书侍郎兼礼部尚书，寻加户部尚书。帝不豫，辽使至不能见，命公亮宴于馆，使者不肯赴。公亮质之曰：“锡宴不赴，是不虔君命也。人主有疾，而必使亲临，处之安乎？” 使者即就席。熙宁三年，拜司空兼侍中、河阳三城节度使。明年，起判永兴军。居一岁，还京师。旋以太傅致仕。元丰元年卒，年八十。帝临哭，辍朝三日。公亮方厚庄重，沉深周密，平居谨绳墨，蹈规矩；然性吝啬，殖货至巨万。初荐王安石，及同辅政，知上方向之，阴为子孙计，凡更张庶事，一切听顺，而外若不与之者。尝遣子孝宽参其谋，至上前略无所异，于是帝益信任安石。安石德其助己，故引擢孝宽至枢密以报之。苏轼尝从容责公亮不能救正，世讥其持禄固宠云。
        （节选自《宋史·曾公亮传》）
    </div>
</div>
</body>
</html>